<template>
  <!--  保护落实力度详情-->
  <div class="permission">
    <div class="operate">

      <div>
        <ep-button :size="size" style="margin-left: 15px" icon="export.svg" @click="getInfo('00')">母值配置</ep-button>
        <ep-button :size="size" style="margin-left: 15px" icon="export.svg" @click="getInfo('01')">县市区配置</ep-button>
      </div>
    </div>

    <a-modal
        title="保护落实力度配置"
        centered
        style=""
        width="90%"
        destroyOnClose
        :mask-closable="false"
        v-model="visible"
        @cancel="handleCancel"
    >
      <evaIntProImplementForm ref="evaIntProImplementForm"/>
      <template slot="footer">
        <a-button @click="handleCancel">关闭</a-button>
      </template>
    </a-modal>
    <div class="ep-table" v-if="parent">
      <zh-table height="auto"  ref="parent"  row-id="roleId" type="default"
                :url="tableUrl" :columns="tableColumn" >
        <template #operate="{ row }">
          <div class="alert-message">
            <i class="fa fa-exclamation-circle alert-message-icon"></i>
            <span class="alert-message-content">
              <ep-button status="primary" @click=editForParent(row)>编辑</ep-button>
            </span>
          </div>
        </template>
      </zh-table>
    </div>
    <div class="ep-table" v-else>
      <zh-table height="auto"  ref="child"  row-id="roleId" type="default"
                :url="tableUrl" :columns="tableColumn1" >
        <template #operate="{ row }">
          <div class="alert-message">
            <i class="fa fa-exclamation-circle alert-message-icon"></i>
            <span class="alert-message-content">
              <ep-button status="primary" @click=editForChild(row) :disabled="row.orgId==='330300000000'">编辑</ep-button>
            </span>
          </div>
        </template>
      </zh-table>
    </div>
  </div>
</template>
<script>
import {getInfoForEvaInt} from "@/services/system/whdngxlApi"
import moment from 'moment'
import ZhTable from "@/components/zh-table/ZhTable";
import EpSearch from "@/components/assembly/search";
import {mapGetters} from "vuex";
export default {
  name: 'evaIntProImplement',
  computed: {
    ...mapGetters(['size']),
  },
  components: {
    EpSearch,
    evaIntProImplementForm : ()  =>import ("@/pages/whdn/assIndSysManager/form/evaIntProImplementForm"),
    ZhTable
  },
  data() {
    return {
      parent: true,
      dictData: {},
      tableColumn: [
        {field: 'evaInt01', title: '关联指标', align: 'center', width: 250},
        {field: 'evaInt02', title: '保护经费执行率(W31)', align: 'center', width: 180},
        {field: 'evaInt03', title: '修缮工程完成率(W32)', align: 'center', width: 180},
        {field: 'evaInt04',title: '保护线划定率(W33)',align: 'center', width: 180},
        {field: 'evaInt05',title: '保护队伍建设情况(W34)',align: 'center', width: 180},
        {field: 'evaInt06',title: '现存隐患的数量(W35)',align: 'center', width: 180},
        {field: 'evaInt07',title: '合计(W3)',align: 'center', width: 120},
        {
          field: 'operate', title: '操作', fixed: 'right', align: 'center', width: 120, slots: {
            // 使用插槽模板渲染
            default: 'operate'
          }
        },
      ],
      tableColumn1: [
        {field: 'orgName', title: '区划', align: 'center', width: 250},
        {field: 'f0403', title: '保护经费执行率(W31)', align: 'center', width: 180},
        {field: 'f0405', title: '修缮工程完成率(W32)', align: 'center', width: 180},
        {field: 'f0407',title: '保护线划定率(W33)',align: 'center', width: 180},
        {field: 'f0409',title: '保护队伍建设情况(W34)',align: 'center', width: 180},
        {field: 'f0411',title: '现存隐患的数量(W35)',align: 'center', width: 180},
        {field: 'evaInt07',title: '合计(W3)',align: 'center', width: 120},
        {
          field: 'operate', title: '操作', fixed: 'right', align: 'center', width: 120, slots: {
            // 使用插槽模板渲染
            default: 'operate'
          }
        },
      ],
      tableData: [],
      tableUrl: getInfoForEvaInt,
      toolbarConfig: {
        custom: true,
        slots: {}
      },
      visible: false,
      option:{data:''},
      manageRate:'',
    }
  },
  created() {
    this.$nextTick(() => {
      this.init()
    })
  },
  mounted() {
  },
  methods: {
    moment,
    init() {
      this.getInfo("00")
    },
    getInfo(evaIntType){
      if(evaIntType === '00'){
        this.parent = true
        this.$nextTick(() => {
          this.$refs.parent.query({evaIntType: evaIntType})
        })
      }else {
        this.parent = false
        this.$nextTick(() => {
          this.$refs.child.query({evaIntType: evaIntType})
        })

      }
    },
    handleCancel() {
      this.visible=false
      this.getInfo(this.parent? '00':'01')
    },
    showOrHide() {
      this.visible=!this.visible
    },
    editForParent(row){
      this.showOrHide()
      this.$nextTick(()=>{
        this.$refs.evaIntProImplementForm.initData('330300000000');
      })
    },
    editForChild(row){
      this.showOrHide()
      this.$nextTick(()=>{
        this.$refs.evaIntProImplementForm.initData(row.orgId);
      })
    },
  },
  watch: {
  }
}
</script>
<style lang="less" scoped>
.permission {
  //padding: 15px 20px 0;
  height: 100%;

  .desc,
  .operate {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #fff;

    > div {
      flex: 0 0 auto;
      display: flex;
      align-items: center;
    }


  }

  .desc {
    margin-bottom: 20px;
  }

  .operate {
    margin-bottom: 15px;
    .field {
      flex: 0 0 auto;
      position: relative;
      margin-left: 15px;
      .field-box {
        position: absolute;
        top: 40px;
        left: 0;
        right: -40px;
        z-index: 99;
        border: 1px solid #2175a9;
        background: #002a44;
        border-radius: 5px;
        ul {
          padding: 10px;
          li {
            padding: 1px 0;
          }
        }
        .btn {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 5px;
          border-top: 1px solid #2175a9;
          color: #fff;
          p {
            flex: 1;
            text-align: center;
            cursor: pointer;
            &:hover {
              color: #49bbeb;
            }
          }
        }
      }
    }
  }
  .ep-table {
    height: calc(100% - 60px);
  }
}
</style>
